<template>
  <div class="dump-file-list">
    <!-- 文件上传区域 -->
    <n-card title="上传转储文件" size="small" class="upload-card">
      <n-upload
        :multiple="true"
        :accept="'.gz,.zip,.tar.gz'"
        @change="handleFileChange"
        :max="10"
        :show-file-list="false"
      >
        <n-upload-dragger>
          <div class="upload-content">
            <n-icon size="32" color="#d9d9d9">
              <DocumentOutline />
            </n-icon>
            <p class="upload-text">点击或拖拽转储文件到此处</p>
            <p class="upload-hint">支持 .gz, .zip, .tar.gz 格式</p>
          </div>
        </n-upload-dragger>
      </n-upload>
    </n-card>

    <!-- 文件列表 -->
    <n-card title="转储文件列表" size="small">
      <n-empty v-if="files.length === 0" description="暂无转储文件" />
      <n-list v-else>
        <n-list-item 
          v-for="file in files" 
          :key="file.id"
          :class="{ 'extracted': file.status === 'extracted', 'error': file.status === 'error' }"
        >
          <n-thing>
            <template #header>
              <n-space align="center" justify="space-between">
                <n-space align="center">
                  <n-icon size="20" :color="getStatusColor(file.status)">
                    <component :is="getStatusIcon(file.status)" />
                  </n-icon>
                  <span class="file-name">{{ file.name }}</span>
                  <n-tag :type="getStatusTagType(file.status)" size="small">
                    {{ getStatusText(file.status) }}
                  </n-tag>
                </n-space>
                <n-space>
                  <n-button 
                    v-if="file.status === 'compressed'"
                    size="small" 
                    type="primary" 
                    @click="$emit('extract', file)"
                    :loading="file.status === 'extracting'"
                  >
                    解压
                  </n-button>
                  <n-button 
                    v-if="file.status === 'extracted'"
                    size="small" 
                    type="info" 
                    @click="viewExtracted(file)"
                  >
                    查看
                  </n-button>
                  <n-button 
                    size="tiny" 
                    quaternary 
                    type="error"
                    @click="$emit('delete', file)"
                  >
                    <template #icon>
                      <n-icon><TrashOutline /></n-icon>
                    </template>
                  </n-button>
                </n-space>
              </n-space>
            </template>
            <template #description>
              <n-space vertical size="small">
                <div class="file-info">
                  <span><strong>大小:</strong> {{ formatFileSize(file.size) }}</span>
                  <span><strong>类型:</strong> {{ getTypeDisplayName(file.type) }}</span>
                  <span><strong>创建时间:</strong> {{ formatDate(file.createdAt) }}</span>
                  <span v-if="file.extractedAt">
                    <strong>解压时间:</strong> {{ formatDate(file.extractedAt) }}
                  </span>
                </div>
                <div v-if="file.status === 'extracted' && file.extractedPath" class="extracted-info">
                  <strong>解压路径:</strong> {{ file.extractedPath }}
                </div>
                <div v-if="file.status === 'error' && file.errorMessage" class="error-info">
                  <strong>错误信息:</strong> {{ file.errorMessage }}
                </div>
              </n-space>
            </template>
          </n-thing>
        </n-list-item>
      </n-list>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useMessage } from 'naive-ui'
import { 
  DocumentOutline, 
  CheckmarkCircleOutline, 
  AlertCircleOutline, 
  TimeOutline,
  TrashOutline 
} from '@vicons/ionicons5'

// Props
interface Props {
  files: DumpFile[]
  type: 'framework' | 'operation' | 'debug'
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  extract: [file: DumpFile]
  delete: [file: DumpFile]
  upload: [type: string, files: File[]]
}>()

// 响应式数据
const message = useMessage()

// 转储文件类型定义
interface DumpFile {
  id: string
  name: string
  size: number
  type: 'framework' | 'operation' | 'debug'
  status: 'compressed' | 'extracted' | 'extracting' | 'error'
  path: string
  createdAt: Date
  extractedAt?: Date
  extractedPath?: string
  errorMessage?: string
}

// 处理文件上传
function handleFileChange(options: { fileList: any[] }) {
  const files = options.fileList.map(item => item.file).filter(Boolean)
  if (files.length > 0) {
    emit('upload', props.type, files)
  }
}

// 获取状态颜色
function getStatusColor(status: string): string {
  switch (status) {
    case 'extracted': return '#52c41a'
    case 'extracting': return '#1890ff'
    case 'error': return '#ff4d4f'
    default: return '#8c8c8c'
  }
}

// 获取状态图标
function getStatusIcon(status: string) {
  switch (status) {
    case 'extracted': return CheckmarkCircleOutline
    case 'extracting': return TimeOutline
    case 'error': return AlertCircleOutline
    default: return DocumentOutline
  }
}

// 获取状态标签类型
function getStatusTagType(status: string): 'success' | 'warning' | 'error' | 'info' | 'default' {
  switch (status) {
    case 'extracted': return 'success'
    case 'extracting': return 'info'
    case 'error': return 'error'
    default: return 'default'
  }
}

// 获取状态文本
function getStatusText(status: string): string {
  switch (status) {
    case 'extracted': return '已解压'
    case 'extracting': return '解压中'
    case 'error': return '解压失败'
    default: return '未解压'
  }
}

// 获取类型显示名称
function getTypeDisplayName(type: string): string {
  switch (type) {
    case 'framework': return '框架日志'
    case 'operation': return '操作日志'
    case 'debug': return '调试日志'
    default: return type
  }
}

// 格式化文件大小
function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化日期
function formatDate(date: Date): string {
  return new Date(date).toLocaleString('zh-CN')
}

// 查看已解压文件
function viewExtracted(file: DumpFile) {
  if (file.extractedPath) {
    message.info(`查看解压文件: ${file.extractedPath}`)
    // 这里可以添加打开文件或跳转到文件查看页面的逻辑
  }
}
</script>

<style scoped>
.dump-file-list {
  width: 100%;
}

.upload-card {
  margin-bottom: 16px;
}

.upload-content {
  text-align: center;
  padding: 20px;
}

.upload-text {
  margin: 8px 0 4px 0;
  font-size: 16px;
  color: #666;
}

.upload-hint {
  margin: 0;
  font-size: 12px;
  color: #999;
}

.file-name {
  font-weight: 500;
  margin-left: 8px;
}

.file-info {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.extracted-info {
  color: #52c41a;
  font-size: 12px;
}

.error-info {
  color: #ff4d4f;
  font-size: 12px;
}

.n-list-item.extracted {
  background-color: rgba(82, 196, 26, 0.05);
}

.n-list-item.error {
  background-color: rgba(255, 77, 79, 0.05);
}

.n-thing {
  width: 100%;
}
</style> 